<script setup>
import cube from "@/views/datasource/api/cube.js"
import { Message } from "@arco-design/web-vue"
import { useVModel } from "@vueuse/core"
const props = defineProps({
  // 是否组件
  isComponent: {
    type: Boolean,
    default: false
  },
  // 组件数据
  modelValue: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(["update:modelValue"])
const modelValue = useVModel(props, "modelValue", emit)
const columns = [
  {
    title: "枚举名称",
    field: "name",
    align: "center"
  },
  {
    title: "字段",
    field: "field",
    align: "center"
  },
  {
    title: "数据源",
    field: "datasource.name",
    align: "center"
  },
  {
    title: "数据集",
    field: "datacube.name",
    align: "center"
  },
  {
    title: "更新时间",
    field: "update_time",
    align: "center"
  },
  {
    title: "操作",
    slots: { default: "action" }
  }
]

const list = ref([])
const params = {
  page: 1,
  page_size: 20,
  search: ""
}
const init = () => {
  cube.dataCubeEnumList(params).then((res) => {
    list.value = res.data
  })
}
init()
const handlePageChange = (e) => {
  init()
}

const enumForm = ref({})
const visible = ref(false)
const edit = (row) => {
  enumForm.value = row
  visible.value = true
}

const saveEnum = () => {
  const params = {
    code: enumForm.value.code,
    name: enumForm.value.name,
    content: enumForm.value.content
  }
  cube.dataCubeSaveEnum(params).then((res) => {
    if (res.code === 200) {
      Message.success(res.message)
      visible.value = false
    }
  })
}

const getEnumList = async () => {
  // 获取加载状态
  Message.loading("加载中...")
  enumForm.value.content = []
  const params = {
    datasource_id: enumForm.value.datasource_id,
    cube_id: enumForm.value.cube_id,
    field: enumForm.value.field,
    cube: ""
  }
  const res = await cube.dataCubeEnum(params)
  enumForm.value.content = res.data
}

const select = (row) => {
  modelValue.value = row
}
</script>

<template>
  <div class="h-full">
    <vxe-grid :columns="columns" :data="list.data">
      <template #action="{ row }">
        <a-space>
          <a-button v-if="isComponent" size="small" @click="select(row)">选择</a-button>
          <a-button size="small" @click="edit(row)">编辑</a-button>
        </a-space>
      </template>
      <template #pager>
        <!--使用 pager 插槽-->
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Total']"
          v-model:current-page="params.page"
          v-model:page-size="params.page_size"
          :total="list.total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
    <a-modal v-model:visible="visible" width="40%" :footer="false" @ok="onSubmit">
      <a-form class="w-full">
        <a-form-item label="枚举名称">
          <a-input v-model="enumForm.name" placeholder="请输入枚举名称" />
        </a-form-item>
        <a-form-item label="枚举列表">
          <vxe-table
            style="width: 100%"
            height="400px"
            align="center"
            :scroll-y="{ enabled: true }"
            :data="enumForm.content"
          >
            <vxe-column field="value" title="value" />
          </vxe-table>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button size="small" theme="danger" variant="outline" @click="getEnumList"> 重新生成枚举 </a-button>
            <a-button v-debounce size="small" variant="outline" theme="success" @click="saveEnum"> 保存 </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped lang="scss"></style>
